<template>
	<view class="con" :class="{ismasg:isall}">
		<view class="bgFD2F55"></view>
		<view :style="{paddingTop:shh - 3 +'px'}"></view>
		<view class="flex-a-i ">
			<uni-icons @click="back" type="left" size="22" color="#000"></uni-icons>
			<view @click="navto('/pages/search')" :style="{width:width - menuButtonwidth - 67 +'px'}"
				class="size32 ml20 color666 bgF3F5F7 flex-a-i height80 ra16 ra20 " >
				<image mode="widthFix" src="/static/sou.png" class="image mr10 ml20 width40"></image>
				<view class="color999">查单词/词根</view>
			</view>
		</view>
		
		<view class="ra20  pg20-15 mb20 mt20" style="box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(0,0,0,0.1);">
			<view class="flex">
				<view>
					<image :src="info.coverImage" class="wh290-164 ra20"></image>
				</view>
				<view class="ml15 flex1">
					<view class=" height164 flex-ju-b flex-col"  style="align-items: start;">
					<view class="size28 bold one">
						<mp-html :content="info.courseName"></mp-html>
					</view>
					<view class="size24 color666 two">
						<mp-html :content="info.courseDesc"></mp-html>
					</view>
					<view class="flex-ju-b  width1000">
						<!-- <view class="flex-a-i">
							<view class="size24 color666 deleted-text">￥{{item.originalPrice}}</view>
							<view class="size32 colorFD2F55 bold">￥{{item.discountPrice}}</view>
						</view> -->
						<!-- <view v-if="item.isLearning" class="wh140-48 ra5 bgFD2F55 colorfff size24 flex-ju-c">正在学习</view>
						<view v-else-if="item.isToll==0" class="bgFD2F55 colorfff ra10 size24 wh140-50 flex-ju-c">免费试听</view>
						<view v-else-if="item.isToll==2" class="bgFD2F55 colorfff ra10 size24 wh140-50 flex-ju-c">去学习</view> -->
						
						<image v-if="item.isToll==0" mode="widthFix" src="/static/mianfei.png"
							class="width136 image flex"></image>
						<view v-else class="flex-a-i ">
							<template v-if="item.discountPrice>0">
								<view class="size40 colorFD2F55 bold"><text class="size22">￥</text>{{item.discountPrice}}</view>
								<view class="size24 color999 deleted-text ml5">{{item.originalPrice}}</view>
							</template>
							<view v-else class="size32 colorFD2F55 bold">￥{{item.originalPrice}}</view>
						</view>
						
						<view class="size24 color999  pg2-20 ra5">共{{item.wordCount}}词</view>
					</view>
				</view>
				</view>
			</view>
			
			
		</view>
		<view>
			<view class="flex-ju-b size28 mt30 mb30">
				<view @click="tablist(index)" class="flex-ju-c flex-col  color666" :key="index" :class="{active:tindex==index}" v-for="(item,index) in ['课程目录','详细介绍']">
					{{item}}
					<view class="wh45-6 ra4  mt8" :class="tindex==index?'bgFD2F55':'bgfff'"></view>
				</view>
				<template v-if="tindex!=0">
					<view class="mb8 colorfff">全部全部</view>
					<view class="mb8 colorfff">全部全部</view>
				</template>
				
				<template v-else>
					<view class="mb8">
						<view class="flex-ju-b posire zindex5 bgfff ">
							<view @click.stop="isall= !isall" class="flex-ju-b size24 pg5-20 bgf9f9f9 ra30 ">
								<text v-if="aindex==0">全部 {{info.allRootCount}}</text>
								<text v-else-if="aindex==1">已学习 {{info.learnedRootCount}}</text>
								<text v-else-if="aindex==2">未学习 {{info.notStudiedRootCount}}</text>
								<text v-else>已斩 {{info.collectionRootCount}}</text>
								
								<image v-if="isall" mode="widthFix" src="/static/xiangtop.png" class="image width32 ml10"></image>
								<image v-else mode="widthFix" src="/static/bottoms.png" class="image width32 ml10"></image>
							</view>
						</view>
						<view @click="isall = false" v-if="isall" class="posiab mkds zindex50 mt10" style="background: rgba(0,0,0,0.6);">
							<view class="bgfff size28 pl30 " style="border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;">
								<view @click.stop="tabcount(0)" :class="{active1:aindex==0}" class="border-bECEDEE height90 flex-a-i">全部 {{info.allRootCount}}</view>
								<view @click.stop="tabcount(1)" :class="{active1:aindex==1}" class="border-bECEDEE height90 flex-a-i">已学习 {{info.learnedRootCount}}</view>
								<view @click.stop="tabcount(2)" :class="{active1:aindex==2}" class="border-bECEDEE height90 flex-a-i">未学习 {{info.notStudiedRootCount}}</view>
								<view @click.stop="tabcount(3)" :class="{active1:aindex==3}" class="border-bECEDEE height90 flex-a-i">已斩 {{info.collectionRootCount}}</view>
							</view>
						</view>
					</view>
					<view v-if="item.isToll!=1" @click="allopen" class="color666 mb8">全部{{iskai?'收起':'展开'}}</view>
					</template>
					
				<template v-if="tindex==0 && item.isToll ==1">
					<view class="mb8 colorfff">全部全部</view>
				</template>
				
				
			</view>
		</view>
		
		
		<!-- <view v-if="tindex==0" class="flex-ju-b size24">
			<view>
				<view class="flex-ju-b posire zindex5 bgfff ">
					<view @click.stop="isall= !isall" class="flex-ju-b size24 pg5-20 bgf9f9f9 ra30 ">
						<text v-if="aindex==0">全部 {{info.allRootCount}}</text>
						<text v-else-if="aindex==1">已学习 {{info.learnedRootCount}}</text>
						<text v-else-if="aindex==2">未学习 {{info.notStudiedRootCount}}</text>
						<text v-else>已斩 {{info.collectionRootCount}}</text>
						
						<image mode="widthFix" src="/static/bottoms.png" class="image width32 ml10"></image>
					</view>
				</view>
				<view @click="isall = false" v-if="isall" class="posiab mkds zindex50 mt10" style="background: rgba(0,0,0,0.6);">
					<view class="bgfff size28 pl30 " style="border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;">
						<view @click.stop="tabcount(0)" :class="{active:aindex==0}" class="border-bECEDEE height90 flex-a-i">全部 {{info.allRootCount}}</view>
						<view @click.stop="tabcount(1)" :class="{active:aindex==1}" class="border-bECEDEE height90 flex-a-i">已学习 {{info.learnedRootCount}}</view>
						<view @click.stop="tabcount(2)" :class="{active:aindex==2}" class="border-bECEDEE height90 flex-a-i">未学习 {{info.notStudiedRootCount}}</view>
						<view @click.stop="tabcount(3)" :class="{active:aindex==3}" class="border-bECEDEE height90 flex-a-i">已斩 {{info.collectionRootCount}}</view>
					</view>
				</view>
			</view>
			<view v-if="item.isToll!=1" @click="allopen" class="color666 ">全部{{iskai?'收起':'展开'}}</view>
		</view> -->
		
		<view v-if="tindex" class="pb200">
			<mp-html :content="info.courseDetailIntro"></mp-html>
		</view>
		
		<view v-else class="flex-a-i">
			<scroll-view scroll-y style="overflow-y: hidden;" class="hrig pb200" :scroll-into-view="scrollview" scroll-with-animation>
				<template v-if="type==2">
				<view class="  ">
					<uni-collapse ref="collapse" v-model="open" class="viewcollapse" @change="change" >
						<uni-collapse-item :show-arrow="false" v-for="(item,index) in list" :key="index" @click.stop="zhaoa(item,index)" class="pb30 border-bECEDEE mt30" title-border="none" :name="'key'+index">
								<template v-slot:title>
									<view @click.stop="navto('/pages/index/root_detail?id='+item.rootId)" class="flex-ju-b mb20 ">
										<view class="ra32 bold " :class="{color666:item.learnStatus}" >{{item.root}}</view>
										<view>
											<view class="flex-a-i ">
												<view @click.stop="voice(item.audioUrl)" class="bgF9F9F9 pg2-20 ra30 height40 flex-ju-c">
													<image mode="widthFix" src="/static/yuyin.png" class="image width28"></image>
												</view>
												<view @click.stop="tapopen(item,index)" class="bgF9F9F9 pg2-20 ra30 ml20 height40 flex-ju-c">
													<image mode="widthFix" :src="item.isCollect?'/static/xings.png':'/static/xing.png'" class="image width28"></image>
												</view>
											</view>
										</view>
									</view>
									<view  class="flex-ju-b color666">
										<view class=" size24 one flex1">{{item.meaning}}</view>
										<view class="flex-a-i size22">
											{{item.zhan?'收起':'展开'}}
											<image v-if="item.zhan" mode="widthFix" src="/static/xiangtop.png" class="flex image width32"></image>
											<image v-else mode="widthFix" src="/static/xiangxia.png" class="flex image width32"></image>
										</view>
									</view>
								</template>
								<view class="content">
									<view class="flex-a-i flex-wrap size24">
										<view :class="{color666:items.learnStatus}"  v-for="(items,s) in item.wordsDtoList" :key="s" class="mt20 pg2-20 border000 ra20 mr20">{{items.word}}</view>
									</view>
								</view>
							</uni-collapse-item>
						</uni-collapse>
				</view>
				</template>
				<template v-else>
				<view :id="'section'+item.root[0].toUpperCase()" v-for="(item,index) in list" :key="index"  class=" border-bECEDEE pb30 mt30">
						<view class="flex-ju-b mb20" >
							<view @click="navto('/pages/index/root_detail?id='+item.rootId)" :class="{color666:item.learnStatus}" class="ra32 bold flex1" >{{item.root}}</view>
							<view>
								<view class="flex-a-i">
									<view @click.stop="voice(item.pronounce)" class="bgF9F9F9 pg2-20 ra30 height40 flex-ju-c">
										<image mode="widthFix" src="/static/yuyin.png" class="image width28"></image>
									</view>
									<view @click.stop="tapopen(item,index)" class="bgF9F9F9 pg2-20 ra30 ml20 height40 flex-ju-c">
										<image mode="widthFix" :src="item.isCollect?'/static/xings.png':'/static/xing.png'" class="image width28"></image>
									</view>
								</view>
							</view>
						</view>
						<view class="color666 size24 one flex1"></view>
					</view>
				</template>
				
			</scroll-view>
			<view class="size22 color666">
				<view @click="tapzimu(item)" class="wh60-35 flex-ju-c" v-for="(item,p) in zimu" :key="p">{{item}}</view>
			</view>
		</view>
		
	</view>
	<view class="posifi width1000 zindex5 bottom0 ">
		<view class="center flex-a-i bgfff pl30 pr30 pt20 color999" :style="{paddingBottom:bhh+'px'}" style="box-shadow: 0rpx -4rpx 30rpx 0rpx rgba(0,0,0,0.1);border-top-right-radius: 20px;border-top-left-radius: 20px;">
			<view @click="kesCollect" class="flex-ju-c flex-col">
				<image mode="heightFix" :src="info.isCollect?'/static/bhongxing.png':'/static/cang.png'" class="image height41"></image>
				<view class="size24 ">收藏</view>
			</view>
			<button class="but" @click="customer">
				<view class="ml50 mr50">
					<image mode="heightFix" src="/static/kkfu.png" class="image height41"></image>
					<view class="size24 color999 ">客服</view>
				</view>
				
			</button>
			
			<view v-if="item.isToll==1" @click="$refs.upxue.open()" class="bgFD2F55 flex-ju-c ra20 height96 colorfff flex1">
				<image mode="widthFix" src="/static/zijiesou.png" class="image width168"></image>
				</view>
			<view v-if="item.isToll==2||item.isToll==0" class="bgECEDEE flex-ju-c color999 ra20 height96  flex1">已解锁</view>
		</view>
	</view>
	<add ref="add" @collection="collection" type="2" :wordId="rootId"></add>
	
	<uni-popup ref="upxue" type="bottom"  border-radius="20px 20px 0px 0">
		<view class="posire">
			<view class="posiab right30 top30 zindex5" @click="$refs.upxue.close()">
				<image mode="widthFix" src="/static/closes.png" class="image  width65"></image>
			</view>
			<image mode="widthFix" src="/static/topup.png" class="image flex"></image>
			<view class=" posiab top-104 ml30">
				<image mode="widthFix" src="/static/xuexi.png" class="image flex width188"></image>
				<view class="color222 size48 bold">解锁课程</view>
			</view>
		</view>
		<view class="posire bgfff pt20 mt-1">
			<image mode="widthFix" src="/static/gengbg.png" class="image posiab flex bottom0"></image>
			<view class="con " :style="{paddingBottom:bhh+'px'}">
				<view class="borderFFDEE4 ra20 flex-a-i pg25-20 ">
					<view>
						<image :src="info.coverImage" class="image wh290-164 ra15"></image>
					</view>
					<view class="flex1 ml15">
						<view class="one size28 bold">{{info.courseName}}</view>
						<view class="two color666">{{info.courseDesc}}</view>
						<view class="flex-ju-b mt10 mb10">
							<text class="color666 size24">共 {{item.wordCount}} 词</text>
						</view>
						
					</view>
				</view>
				<view class=" mt20 posire">
					<view class="bg272727 colorFED6A1 size26 flex-ju-b ra30">
						<!-- <template v-if="item.discountPrice>0">
							<view class="size40 colorFD2F55 bold"><text
									class="size22">￥</text>{{item.discountPrice}}</view>
							<view class="size24 color666 deleted-text">{{item.originalPrice}}</view>
						</template>
						<view v-else class="size40 colorFD2F55 bold"><text
								class="size22">￥</text>{{item.originalPrice}}</view> -->	
								 
							<!-- 	
								<template v-if="item.discountPrice>0">
									<view class="size40 colorFD2F55 bold"><text class="size22">￥</text>{{item.discountPrice}}</view>
									<view class="size24 color999 deleted-text ml5">{{item.originalPrice}}</view>
								</template>
								<view v-else class="size32 colorFD2F55 bold">￥{{item.originalPrice}}</view>
								
						 -->
						<view v-if="item.discountPrice>0" class="flex-ju-c pl30">
							限时优惠<text class="ml10">¥ </text><text class="size48 pb10 mr10"> {{item.discountPrice}}</text><text  class="deleted-text">¥{{item.originalPrice}}</text>
						</view>
						<view v-else class="flex-ju-c pl30">
							限时优惠<text class="ml10"> ¥ </text><text class="size48 pb10 mr10 ml5"> {{item.originalPrice}}</text>
						</view>
						<image @click="tapcourser" mode="widthFix" src="/static/toujie.png" class="image wh264 ra15"></image>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		data() {
			return {
				kid:"",
				iskai:false,
				open:[],
				close:[],
				isCollection:0,
				tindex:0,
				list:[],
				rootId:"",
				info:{},
				type:2,
				item:{},
				addrootid:"",
				wordId:"",
				couritem:{},
				isall:false,
				aindex:0,
				page:1,
				menuButtonwidth:0,
				width:0
			}
		},
		onReachBottom() {
			this.page++
			this.getinfo()
		},
		mounted() {
			
		},
		onLoad(option) {
			// #ifdef MP-WEIXIN
				this.menuButtonwidth = uni.getMenuButtonBoundingClientRect().width
			//#endif
			
			this.width =	uni.getSystemInfoSync().screenWidth
			
			// console.log(option.item)
			if(option.type){
				this.item = JSON.parse(decodeURIComponent(option.item))
			}else{
				// this.item = JSON.parse(option.item)
				this.item.courseId = option.id
				this.item.isToll = option.isToll
				this.item.discountPrice = option.discountPrice
				this.item.originalPrice = option.originalPrice
				this.item.wordCount = option.wordCount
			}
			
			if(this.item.isToll==1){
				this.type=1
			}
			this.getinfo()
		},
		methods: {
			tabcount(index){
				this.page=1
				this.aindex=index
				this.list=[]
				this.getinfo()
			},
			zhaoa(item,index){
				if(item.zhan){
					item.zhan = false
				}else{
					item.zhan = true
				}
			},
			allopen(){
				this.iskai = !this.iskai
				
				if(this.iskai){
					this.open=this.close
					this.list.map(item=>{
						item.zhan = true
					})
				}else{
						this.open=[]
						this.list.map(item=>{
							item.zhan = false
						})
				}
				
			},
			tapzimu(item){
				this.scrollview ='section'+item
			},
			kesCollect(){
				if(this.info.isCollect){
					this.http('/api/folder_favorite_relation/cancel?type=4&entryId='+this.item.courseId,{
						type:4,
						entryId:this.item.courseId
					}).then(res=>{
						this.info.isCollect = false
						this.toast('取消收藏')
					})
				}else{
					this.http('/api/folder_favorite_relation/add',{
						favoriteType:4,
						entryId:this.item.courseId
					},'post').then(res=>{
						this.info.isCollect = true
						this.toast('收藏成功')
					})
				}
			},
			collection(){
				this.couritem.isCollect=1
				this.toast('收藏成功')
			},
			tapopen(item,index){
				if(item.isCollect==1){
					this.http('/api/folder_favorite_relation/cancel',{
						entryId:item.rootId,
						type:2
					}).then(res=>{
						item.isCollect = 0
						this.toast('已取消')
					})
				}else{
					this.couritem = item
					this.rootId=item.rootId
					setTimeout(()=>{
						this.$refs.add.open(1)
					},10)
				}
			},
			getinfo(){
				this.http('/api/course/detail',{
					courseId:this.item.courseId,
					status:this.aindex,
					pageNo:this.page,
					pageSize:200
				},'post').then(res=>{
					
					this.httpimg([res.data.imageUrl]).then(ress=>{
						
						res.data.coverImage = ress.data[0].fileUrl
						
						this.info = res.data
					})
					
					if(res.data.rootInfoDos){
						this.list = [...this.list,...res.data.rootInfoDos]
						res.data.rootInfoDos.map((item,index)=>{
							 this.close.push('key'+index)
						})
					}
					this.isall = false
					 
					 
				})
			},
			tapcourser(){
				this.http('/api/orderMain/pay',{
					courseId:this.item.courseId
				}).then(res=>{
					uni.requestPayment({
					    provider: 'weixin',
					    orderInfo: 'orderInfo',
						timeStamp:res.data.timeStamp,
						nonceStr:res.data.nonceStr,
						package:res.data.prepayId,
						signType:res.data.signType,
						paySign:res.data.paySign,
					    success:  (res)=> {
					        this.toast('支付成功')
							this.getinfo()
							this.type=2
							this.$refs.upxue.close()
					    },
					    fail:  (err)=> {
							this.toast('支付失败')
					    }
					});
				})
			},
			tablist(index){
				this.tindex=index
			},
			change(e,item){
				
				
				// #ifdef MP
				this.$nextTick(() => {
					this.$refs.collapse.resize()
				})
				// #endif
			},
		}
	}
</script>

<style>
	page{
		background: #fff;
	}
	.ismasg{
		height: 100vh;
		overflow: hidden;
	}
	.mkds{
		width: 100vw;
		height: 70vh;
		left:0;
	}

	/* /deep/ .viewcollapse .uni-collapse-item__title-arrow{
		margin-top: 60rpx;	
		margin-right: -1px;
	} */
	/* /deep/ .viewcollapse .uni-collapse-item-border{
		padding-bottom: 30rpx;
	} */
	.active1{
		color:#FD2F55;
		font-weight: bold;
	}
.active{
	color:#000;
		font-weight: bold;
	}
	uni-button:after {margin: 0;		line-height: normal;
			padding: 0;
			border:none;
			background: none;
		}
		button::after{margin: 0;		line-height: normal;
			padding: 0;
			border:none;
			background: none;
		}
		button{
			line-height: normal;
			margin: 0;
			padding: 0;
			border:none;
			background: none;
		}
		.but{margin: 0;		line-height: normal;
			padding: 0;
			border:none;
			background: none;
		}
	
</style>
